<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>重排和重绘</title>
    <style>
        div {
            background-color: #00a2ff;
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <button id="btn-size">大小</button>
    <button id="btn-color">颜色</button>
    <script>
        const byId = id => document.getElementById(id);
        const btnSize = byId('btn-size');
        const btnColor = byId('btn-color');
        let div = byId('demo');
        let flag = true;
        let flag2 = true;

        btnSize.addEventListener('click', () => {
            div.style.width = flag ? '300px' : '200px';
            flag = !flag;
        });

        btnColor.addEventListener('click', () => {
            div.style.backgroundColor = flag2 ? '#ef5fa7' : '#00a2ff';
            flag2 = !flag2;
        });
    </script>
</body>
</html>